<template>
	<view class="container">
		<view class="profile-header">
			<image class="avatar" :src="avatar" mode="aspectFill"></image>
			<text class="nickname">昵称: {{nickname}}</text>
		</view>
		<view class="profile-body">
			<view class="profile-item" @click="changePassword">
				<text>修改密码</text>
				<text class="arrow">></text>
			</view>
			<view class="profile-item" @click="settings">
				<text @click="test">设置</text>
				<text class="arrow">></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Profile',
		data() {
			return {
				nickname: undefined,
				avatar: undefined
			}
		},
		onLoad() {
			
		},
		methods: {
			test(){
			uni.getUserProfile({
				desc: "test",
				success: (res)=> {
					this.nickname = res.userInfo.nickName;
					this.avatar = res.userInfo.avatarUrl;
					console.log(res)
				},
				fail(err) {
					console.error(err)
				}
			})	
			},
			changePassword() {
				uni.showToast({
					title: '修改密码',
					icon: 'none'
				});
			},
			settings() {
				uni.showToast({
					title: '设置',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.profile-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
		margin-bottom: 20rpx;
	}

	.nickname {
		font-size: 32rpx;
		color: #333;
	}

	.profile-body {
		width: 100%;
	}

	.profile-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.profile-item text {
		font-size: 28rpx;
		color: #333;
	}

	.arrow {
		font-size: 28rpx;
		color: #999;
	}
</style>